<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible11"
      title="转移客户"
      width="420px">
      <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" :rules="rules">
        <div v-if="list2.length == 0 && isCharge == 0">
          <el-form-item label="将客户转到：" prop="userId">
            <el-radio-group v-model="quitForm.userId" @change="quitForm.remark = '';quitForm.remark2 = ''">
              <el-radio :label="0">公海</el-radio>
              <el-radio :label="-2">回收站</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="quitForm.userId == -2 ? '回收站流转原因：' : '公海流转原因：'" prop="remark" style="margin-top: 16px">
            <el-select v-model="quitForm.remark" placeholder="请选择" v-if="quitForm.userId === 0" >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="quitForm.remark" placeholder="请选择" v-if="quitForm.userId === -2">
              <el-option
                v-for="item in options2"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="情况说明" prop="remark2" v-if="quitForm.remark == '其它'">
            <el-input v-model="quitForm.remark2" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </div>
        <div v-else-if="list2.length == 0 && isCharge == 1">确定将此公海客户转移给自己?</div>
        <div v-else-if="list2.length>0">
          <el-form-item label="将客户转到：" prop="userId">
            <el-select v-model="quitForm.userId" filterable placeholder="请选择" @change="quitForm.remark = '';quitForm.remark2 = ''">
              <el-option
                v-for="item in list2"
                :key="item.user_id"
                :label="item.real_name"
                :value="item.user_id">
              </el-option>
            </el-select>
           </el-form-item>
          <el-form-item :label="quitForm.userId == -2 ? '回收站流转原因：' : '公海流转原因：'" prop="remark" v-if="quitForm.userId === 0 || quitForm.userId === -2">
            <el-select v-model="quitForm.remark" placeholder="请选择" v-if="quitForm.userId === 0">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="quitForm.remark" placeholder="请选择" v-if="quitForm.userId === -2">
              <el-option
                v-for="item in options2"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="情况说明" prop="remark2" v-if="quitForm.remark == '其它'">
            <el-input v-model="quitForm.remark2" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose11">取 消</el-button>
      <el-button type="primary" @click="handleConfirm11" :loading="btnLoading11">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  removeCustomerListAPI,
  removeCustomerAPI,
  batchRemoveCustomerAPI,
} from '@/api/fms.js';
import {getCustomerInfoAPI} from '@/api/company.js'
export default {
  name: "cmsTransfer",
  data(){
    return {
      dialogVisible11:false,
      list2:[],
      isCharge:'',
      btnLoading11:false,
      quitForm:{
        customerId:'',
        userId:'',
        remark:'',
        remark2:'',
      },
      customerIds:[],
      moveType:'',
      rules:{
        userId:[{ required: true, message: '此项必填', trigger: 'change' },],
        remark:[{ required: true, message: '此项必填', trigger: 'change' },],
        remark2:[{ required: true, message: '此项必填', trigger: 'blur' },],
      },
      options:[],
      options2:[]
    }
  },
  filters:{

  },
  created() {

  },
  methods:{
    getOption() {
      getCustomerInfoAPI({tab:10}).then((res) => {
        this.options=res;
      })
      getCustomerInfoAPI({tab:11}).then((res) => {
        this.options2=res;
      })
    },
    showPop(customerId, type, isCharge) {
      this.getOption()
      this.isCharge = isCharge;
      this.dialogVisible11 = true;
      this.list2 = []
      this.quitForm.remark = ''
      this.quitForm.remark2 = ''
      this.removeCustomerList().then(()=>{
        if (this.isCharge == 0 && this.list2.length > 0) {
            this.list2.unshift({
              user_id:-2,
              real_name:'回收站'
            })
            this.list2.unshift({
              user_id:0,
              real_name:'公海'
            })
            this.quitForm.userId=this.list2[0]['user_id']
        }
        if(this.list2.length == 0 && this.isCharge == 0){
          this.quitForm.userId=0
        }
      })
      if (type == 'one') {
        this.quitForm.customerId = customerId;
        this.moveType = type;
      } else if (type == 'more') {
        this.moveType = type;
        this.customerIds = customerId.map((res) => {
          return res.customerId
        })
      };
    },
    // 获取转移对象列表
    removeCustomerList() {
     return  removeCustomerListAPI({
        pageNum: 1,
        pageSize: 1000
      }).then(response => {
        this.list2 = response;
      });
    },
    handleClose11() {
      this.dialogVisible11 = false;
      this.btnLoading11 = false;
    },
     //确认转移
    handleConfirm11() {
      this.$refs.quitForm.validate((valid) => {
        if (valid) {
          this.btnLoading11 = true;
          let data=JSON.parse(JSON.stringify(this.quitForm));
          if(data.remark == '其它'){
            data.remark = data.remark+data.remark2
          }
          if(this.list2.length==0&&this.isCharge==1){
            data.userId=-1;
          }
          delete data.remark2
          if (this.moveType == 'one') {
            removeCustomerAPI(data).then((res) => {
              this.$message.success('转移成功')
              this.handleClose11();
              this.$emit('update');
            }).catch(() => {
              this.btnLoading11 = false;
            })
          } else if (this.moveType == 'more') {//批量转移
            batchRemoveCustomerAPI({
              customerIds: this.customerIds,
              userId:data.userId,
              remark: data.remark
             }).then((res) => {
              this.$message.success('转移成功')
              this.handleClose11();
              this.$emit('update');
            }).catch(() => {
              this.btnLoading11 = false;
            })
          }
        }
      })
    },
  }
};
</script>

<style scoped lang="scss">

</style>
